<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta charset="utf-8" />
	<title>权限管理 - 权限编辑</title>
	<meta name="description" content="overview &amp; stats" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
	<link rel="stylesheet" href="${request.contextPath}/static/assets/css/bootstrap.min.css" />
	<link rel="stylesheet" href="${request.contextPath}/static/assets/font-awesome/4.7.0/css/font-awesome.min.css" />
	<!-- page specific plugin styles -->
	<link rel="stylesheet" href="${request.contextPath}/static/assets/css/jquery-ui.custom.min.css" />
	<link rel="stylesheet" href="${request.contextPath}/static/assets/css/jquery.gritter.min.css" />
	<!-- text fonts -->
	<link rel="stylesheet" href="${request.contextPath}/static/assets/fonts/fonts.googleapis.com.css" />
	<!-- BootstrapValidator -->
	<link rel="stylesheet" href="${request.contextPath}/static/assets/css/bootstrapValidator.min.css" />
	<!-- ace styles -->
	<link rel="stylesheet" href="${request.contextPath}/static/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
	<!-- ace settings handler -->
	<link rel="stylesheet" href="${request.contextPath}/static/assets/css/zTreeStyle.css" type="text/css">
	<script src="${request.contextPath}/static/assets/js/ace-extra.min.js"></script>
	<script src="${request.contextPath}/static/assets/js/jquery.2.1.1.min.js"></script>
	<script src="${request.contextPath}/static/assets/js/bootstrap.min.js"></script>
	<script src="${request.contextPath}/static/assets/js/jquery-ui.custom.min.js"></script>
	<script src="${request.contextPath}/static/assets/js/jquery.ui.touch-punch.min.js"></script>
	<script src="${request.contextPath}/static/assets/js/bootbox.min.js"></script>
	<script src="${request.contextPath}/static/assets/js/jquery.gritter.min.js"></script>
	<script src="${request.contextPath}/static/assets/js/spin.min.js"></script>
	<!-- ace scripts -->
	<script src="${request.contextPath}/static/assets/js/ace-elements.min.js"></script>
	<script src="${request.contextPath}/static/assets/js/ace.min.js"></script>
	<!-- validator scripts -->
	<script src="${request.contextPath}/static/assets/js/bootstrapValidator.min.js"></script>
	<!-- user scripts -->
	<script src="${request.contextPath}/static/assets/js/user/base.js"></script>
</head>

<body class="no-skin" style="background-color: #FFF;">
<div class="tabbable">
	<div class="tab-content">
		<div id="manage" class="tab-pane active in">
			<div class="page-header">
				<h1>
					<!-- 权限管理
                    <small>
                        <i class="ace-icon fa fa-angle-double-right"></i> -->
					<#if menu?? && menu.id??>
						编辑菜单
						<#else>
							新增菜单
					</#if>
					<!-- </small> -->
				</h1>
			</div>
			<div class="row">
				<div class="col-xs-12">
					<form id="platformForm" class="form-horizontal" role="form" method="POST">
						<input type="hidden" id="newtext" name="newtext" value="${newtext?c}">
						<#if newtext>
							<div id="menu">
								<div class="space-4"></div>
								<div class="form-group">
									<label class="col-sm-6 control-label no-padding-right" for="form-field-1">
										<h1>请双击菜单添加子菜单</h1>
									</label>
								</div>
								<div class="space-4"></div>
								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 菜单权限 </label>
									<div class="col-sm-9">
										<ul id="menusTree" class="ztree"></ul>
									</div>
								</div>
							</div>
						</#if>


						<div id="newOrEdit" style="margin-left:280px">
							<#if menu?? && menu.id??>
								<input type="hidden" id="id" name="id" value="${menu.id}">
							</#if>
							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> <strong class="text-danger">*</strong>父级权限 </label>
								<div class="col-sm-9">
									<input type="hidden" id="parent" value="${menu.parent!}">
									<input type="hidden" id="parent_id" name="parent_id" value="${menu.parent.id!}">
									<input type="text" id="parentText" name="parentText" placeholder="请选择父级权限" value="${menu.parent.name!}" class="col-xs-10 col-sm-5" <#if menu?? && menu.id??>disabled='true' readOnly='true'</#if>>

								</div>
							</div>
							<div class="space-4"></div>
							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> <strong class="text-danger">*</strong>名称 </label>
								<div class="col-sm-9">
									<input type="text" id="name" name="name" placeholder="请输入权限名称" value="${menu.name!}" class="col-xs-10 col-sm-5" >
								</div>
							</div>
							<div class="space-4"></div>
							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> <strong class="text-danger">*</strong>排序 </label>
								<div class="col-sm-9">
									<input type="text" id="sort" name="sort" class="col-xs-10 col-sm-5" placeholder="排序规则升序,如(1,2,3...),否则不允许录入" value="${menu.sort!}" onkeyup="if(event.keyCode !=37 && event.keyCode != 39){if (!/^[\d]+$/ig.test(this.value)){this.value='';}}" <#if menu?? && menu.id??>disabled='true' readOnly='true'</#if>/>
									<!-- <input type="text" id="sort" name="sort" value="${menu.sort!}"  placeholder="排序规则升序，如(1,2,3...)" class="col-xs-10 col-sm-5" <#if menu?? && menu.id??>disabled='true' readOnly='true'</#if>> -->
								</div>
							</div>
							<div class="space-4"></div>
							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 跳转链接 </label>
								<div class="col-sm-9">
									<input type="text" id="href" name="href" value="${menu.href!}" class="col-xs-10 col-sm-5">
								</div>
							</div>
							<div class="space-4"></div>
							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 图标 </label>
								<!-- <div class="col-sm-9">
									<input type="text" id="icon" name="icon" value="${menu.icon!}" class="col-xs-10 col-sm-5" <#if menu?? && menu.id??>disabled='true' readOnly='true'</#if>>
								</div> -->
								<div class="col-sm-8">
									<input type="text" id="icon" name="icon" value="${menu.icon!}" class="col-xs-2 col-sm-1" disabled='true' readOnly='true'>
									<!-- <label id="iconText" class="col-sm-1 control-label" for="form-field-1">  </label> -->
									<button class="btn btn-info" data-toggle="modal" type="button"
											data-target="#myModal" >选择图标
									</button>
								</div>
							</div>


							<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
								 aria-labelledby="myModalLabel" aria-hidden="true">
								<div class="modal-dialog">
									<div class="modal-content">
										<div class="modal-header">
											<button type="button" class="close"
													data-dismiss="modal" aria-hidden="true">
												&times;
											</button>
											<h4 class="modal-title" id="myModalLabel">
												选择图标(不能选择已使用的图标)
											</h4>
										</div>
										<div class="modal-body">
											<div class="fa-hover col-md-2 col-sm-4"><input type="radio" name="showButton" icon="fa-tachometer" /><i class="fa fa-tachometer"></i></div>
											<div class="fa-hover col-md-2 col-sm-4"><input type="radio" name="showButton" icon="fa-bullhorn"/><i class="fa fa-bullhorn"></i></div>
											<div class="fa-hover col-md-2 col-sm-4"><input type="radio" name="showButton" icon="fa-list"/><i class="fa fa-list"></i></div>
											<div class="fa-hover col-md-2 col-sm-4"><input type="radio" name="showButton" icon="fa-list-alt"/><i class="fa fa-list-alt"></i></div>
											<div class="fa-hover col-md-2 col-sm-4"><input type="radio" name="showButton" icon="fa-sliders"/><i class="fa fa-sliders"></i></div>
											<div class="fa-hover col-md-2 col-sm-4"><input type="radio" name="showButton" icon="fa-share-alt"/><i class="fa fa-share-alt"></i></div>
											<div class="fa-hover col-md-2 col-sm-4"><input type="radio" name="showButton" icon="fa-archive"/><i class="fa fa-archive"></i></div>
											<div class="fa-hover col-md-2 col-sm-4"><input type="radio" name="showButton" icon="fa-asterisk"/><i class="fa fa-asterisk"></i></div>
											<div class="fa-hover col-md-2 col-sm-4"><input type="radio" name="showButton" icon="fa-cog"/><i class="fa fa-cog"></i></div>
											<div class="fa-hover col-md-2 col-sm-4"><input type="radio" name="showButton" icon="fa-cogs"/><i class="fa fa-cogs"></i></div>
											<div class="fa-hover col-md-2 col-sm-4"><input type="radio" name="showButton" icon="fa-th"/><i class="fa fa-th"></i></div>
											<div class="fa-hover col-md-2 col-sm-4"><input type="radio" name="showButton" icon="fa-align-left"/><i class="fa fa-align-left"></i></div>
											<div class="fa-hover col-md-2 col-sm-4"><input type="radio" name="showButton" icon="fa-spinner"/><i class="fa fa-spinner"></i></div>
											<div class="fa-hover col-md-2 col-sm-4"><input type="radio" name="showButton" icon="fa-sitemap"/><i class="fa fa-sitemap"></i></div>
											<div class="fa-hover col-md-2 col-sm-4"><input type="radio" name="showButton" icon="fa-envelope"/><i class="fa fa-envelope"></i></div>
											<div class="fa-hover col-md-2 col-sm-4"><input type="radio" name="showButton" icon="fa-globe"/><i class="fa fa-globe"></i></div>
											<div class="fa-hover col-md-2 col-sm-4"><input type="radio" name="showButton" icon="fa-bar-chart-o"/><i class="fa fa-bar-chart-o"></i></div>
											<div class="fa-hover col-md-2 col-sm-4"><input type="radio" name="showButton" icon="fa-home"/><i class="fa fa-home"></i></div>
											<div class="fa-hover col-md-2 col-sm-4"><input type="radio" name="showButton" icon="fa-flag"/><i class="fa fa-flag"></i></div>
											<div class="fa-hover col-md-2 col-sm-4"><input type="radio" name="showButton" icon="fa-laptop"/><i class="fa fa-laptop"></i></div>
											<div class="fa-hover col-md-2 col-sm-4"><input type="radio" name="showButton" icon="fa-credit-card"/><i class="fa fa-credit-card"></i></div>
											<div class="fa-hover col-md-2 col-sm-4"><input type="radio" name="showButton" icon="fa-calendar"/><i class="fa fa-calendar"></i></div>
											<div class="fa-hover col-md-2 col-sm-4"><input type="radio" name="showButton" icon="fa-superpowers"/><i class="fa fa-superpowers"></i></div>
											<div class="fa-hover col-md-2 col-sm-4"><input type="radio" name="showButton" icon="fa-wpexplorer"/><i class="fa fa-wpexplorer"></i></div>
											<div class="fa-hover col-md-2 col-sm-4"><input type="radio" name="showButton" icon="fa-linode"/><i class="fa fa-linode"></i></div>
											<div class="fa-hover col-md-2 col-sm-4"><input type="radio" name="showButton" icon="fa-free-code-camp"/><i class="fa fa-free-code-camp"></i></div>
											<div class="fa-hover col-md-2 col-sm-4"><input type="radio" name="showButton" icon="fa-bandcamp"/><i class="fa fa-bandcamp"></i></div>
											<div class="fa-hover col-md-2 col-sm-4"><input type="radio" name="showButton" icon="fa-window-maximize"/><i class="fa fa-window-maximize"></i></div>
											<div class="fa-hover col-md-2 col-sm-4"><input type="radio" name="showButton" icon="fa-eercast"/><i class="fa fa-eercast"></i></div>
											<div class="fa-hover col-md-2 col-sm-4"><input type="radio" name="showButton" icon="fa-user-circle-o"/><i class="fa fa-user-circle-o"></i></div>
											<div class="fa-hover col-md-2 col-sm-4"><input type="radio" name="showButton" icon="fa-id-badge"/><i class="fa fa-id-badge"></i></div>
											<div class="fa-hover col-md-2 col-sm-4"><input type="radio" name="showButton" icon="fa-meetup"/><i class="fa fa-meetup"></i></div>
											<div class="fa-hover col-md-2 col-sm-4"><input type="radio" name="showButton" icon="fa-telegram"/><i class="fa fa-telegram"></i></div>
											<div class="fa-hover col-md-2 col-sm-4"><input type="radio" name="showButton" icon="fa-ravelry"/><i class="fa fa-ravelry"></i></div>
											<div class="fa-hover col-md-2 col-sm-4"><input type="radio" name="showButton" icon="fa-podcast"/><i class="fa fa-podcast"></i></div>
											<div class="fa-hover col-md-2 col-sm-4"><input type="radio" name="showButton" icon="fa-area-chart"/><i class="fa fa-area-chart"></i></div>
											<div class="fa-hover col-md-2 col-sm-4"><input type="radio" name="showButton" icon="fa-bicycle"/><i class="fa fa-bicycle"></i></div>
											<div class="fa-hover col-md-2 col-sm-4"><input type="radio" name="showButton" icon="fa-rss"/><i class="fa fa-rss"></i></div>
											<div class="fa-hover col-md-2 col-sm-4"><input type="radio" name="showButton" icon="fa-pie-chart"/><i class="fa fa-pie-chart"></i></div>
											<div class="fa-hover col-md-2 col-sm-4"><input type="radio" name="showButton" icon="fa-hourglass-end"/><i class="fa fa-hourglass-end"></i></div>
											<div class="fa-hover col-md-2 col-sm-4"><input type="radio" name="showButton" icon="fa-wrench"/><i class="fa fa-wrench"></i></div>
											<div class="fa-hover col-md-2 col-sm-4"><input type="radio" name="showButton" icon="fa-unlock"/><i class="fa fa-unlock"></i></div>
											<div class="fa-hover col-md-2 col-sm-4"><input type="radio" name="showButton" icon="fa-tasks"/><i class="fa fa-tasks"></i></div>
											<div class="fa-hover col-md-2 col-sm-4"><input type="radio" name="showButton" icon="fa-object-ungroup"/><i class="fa fa-object-ungroup"></i></div>
											<div class="fa-hover col-md-2 col-sm-4"><input type="radio" name="showButton" icon="fa-paw"/><i class="fa fa-paw"></i></div>
											<div class="fa-hover col-md-2 col-sm-4"><input type="radio" name="showButton" icon="fa-recycle"/><i class="fa fa-recycle"></i></div>
											<div class="fa-hover col-md-2 col-sm-4"><input type="radio" name="showButton" icon="fa-leaf"/><i class="fa fa-leaf"></i></div>
											<div class="fa-hover col-md-2 col-sm-4"><input type="radio" name="showButton" icon=""/>无</div>
										</div>
										<div class="modal-footer">
											<button type="button" class="btn btn-default" type="button"
													data-dismiss="modal">关闭
											</button>
											<button id="submitIcon" type="button" class="btn btn-primary" type="button">
												提交
											</button>
										</div>
									</div><!-- /.modal-content -->
								</div><!-- /.modal -->
							</div>




							<div class="space-4"></div>
							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> <strong class="text-danger">*</strong>是否在菜单中显示 </label>
								<div class="col-sm-1">
									<select class="form-control" name="isShow" id="isShow" >
										<#list isShowList as isShow>
											<option value=${isShow.value} <#if menu.isShow == isShow.value>selected</#if>>${isShow.showName}</option>
										</#list>
									</select>
								</div>
							</div>
							<div class="space-4"></div>
							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 访问权限 </label>
								<div class="col-sm-9">
									<input type="text" id="permission" name="permission" placeholder="系统访问权限设置，如sys:user:view" value="${menu.permission!}" class="col-xs-10 col-sm-5" ><!-- <#if menu?? && menu.id??>disabled='true' readOnly='true' </#if> -->
								</div>
							</div>
							<div class="space-4"></div>
							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 备注信息 </label>
								<div class="col-sm-9">
									<input type="text" id="remarks" name="remarks"  value="${menu.remarks!}" class="col-xs-10 col-sm-5" >
								</div>
							</div>
							<div class="space-4"></div>
							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> <strong class="text-danger">*</strong>是否启用 </label>
								<div class="col-sm-1">
									<select class="form-control" name="delFlag" id="delFlag" <#if menu?? && menu.id??>disabled='true' readOnly='true'</#if>>
										<#list delFlagList as delFlag>
										<option value=${delFlag.value} <#if menu.delFlag == delFlag.value>selected</#if>>${delFlag.showName}</option>
										</#list>
									</select>
								</div>
							</div>

							<div class="clearfix form-actions" style="margin-left:-280px">
								<div class="col-md-offset-4 col-md-8">
									<button id="submitBtn" class="btn btn-info" type="button" style="margin-left:180px">
										<i class="ace-icon fa fa-check bigger-110"></i>
										保存
									</button>
									<button class="btn btn-info" type="button" onclick="history.back();">
										<i class="ace-icon fa fa-times bigger-110"></i>
										取消
									</button>
								</div>
							</div>
						</div>
					</form>
				</div><!-- /.col -->
			</div><!-- /.row -->
		</div>
	</div>
</div>

<script type="text/javascript" src="${request.contextPath}/static/assets/js/jquery.ztree.all.min.js"></script>
<!-- inline scripts related to this page -->
<script type="text/javascript">
	jQuery(function($) {
		var syncCheckedIds = function() {
			var zTree = $.fn.zTree.getZTreeObj("menusTree");
			var nodes = zTree.getCheckedNodes(true);
			var nodeIds = "";
			$.each(nodes, function(index, node) {
				if(isEmpty(nodeIds))
					nodeIds = nodeIds + node.id;
				else
					nodeIds = nodeIds + ',' + node.id;
			});
			$("#menuIds").val(nodeIds);
		};
		var setting = {
			check: {
				enable: true,
				chkboxType: { "Y" : "ps", "N" : "ps" }
			},
			data: {
				simpleData: {
					enable: true
				}
			},
			callback: {
				onCheck: syncCheckedIds
			}
		};
		var zNodes = eval('${menus!}');
		$.fn.zTree.init($("#menusTree"), setting, zNodes);

	})

	$(document).ready(function(event) {
		var newtext=$("#newtext").val();
		if(newtext=='true'){
			$("#newOrEdit").hide();
		}else{
			$("#newOrEdit").show();
		}
		$(document).dblclick(function (e) {
			var node_class = $(e.target).attr('class');
			if(node_class == 'node_name'){
				node_html = $(e.target).html();
				$.ajax({
					url : '${request.contextPath}/menu/parent?name='+node_html,
					type : "GET",
					success:function(data) {
						if(data.sessionStatus==540){//异步请求session过期状态
							window.location.href="${request.contextPath}/login";
						}else if(data.code == 1) {
							menuData=data.msg;
							$("#menu").hide();
							$("#newOrEdit").show();
							$("#parentText").attr("readonly","readonly");
							/* $("#isShow").attr("checked","checked");
							 $("#delFlag").attr("checked","checked"); */
							$("#parentText").val(menuData.name);
							$("#parent").val(menuData);
							$("#parent_id").val(menuData.id);
							var icons=data.icons;
							for(k in icons){
								$("#"+icons[k]).attr("disabled","true");
								$("#"+icons[k]).attr("readOnly","true");
							}
						} else {
							reminder(data.msg);
						}
					},
					error:function(data) {
					}
				});
			}
		})

		$("#submitIcon").on("click", function(){
			var iconValue = $('input:radio[name="showButton"]:checked').attr('icon');
			$("#icon").val(iconValue);
			$('#myModal').modal('hide');
			/* //查询图标是否已经被使用过
			$.ajax({
				type : 'POST',
				url : '${request.contextPath}/rhino/menu/queryChosenMenuIcons.json',
				dataType : 'json',
				success : function(result){
					if(result.success && $.inArray(iconValue, result.icons)!=-1){
						reminder('请您选择没用使用过的图标!');
					}else{
						$("#icon").val(iconValue);
						$('#myModal').modal('hide');
					}
				}
			}); */
		});

		$('#submitBtn').on('click', function(){
			var parent_id = $("#parent_id").val();
			var name = $("#name").val();
			var sort = $("#sort").val();
			var href = $("#href").val();
			var icon = $("#icon").val();
			var isShow = $("#isShow").val();
			var permission = $("#permission").val();
			var remarks = $("#remarks").val();
			var delFlag = $("#delFlag").val();
			//数据合法性校验
			if(isEmpty(name)) {
				$("#name").focus();
				reminder('名称不能为空!');
			} else if(isEmpty(sort)) {
				$("#sort").focus();
				reminder('排序不能为空!');
			}else if(isEmpty(isShow)) {
				$("#isShow").focus();
				reminder('请选择是否显示!');
			} else if(isEmpty(delFlag)) {
				$("#delFlag").focus();
				reminder('请选择是否启用!');
			} else {
				var data = $.extend({
					isShowNew:isShow,
					sortNew:sort,
					icon:icon,
					permissionNew:permission,
					parentId:parent_id,
				},$('#platformForm').serializeToObject());
				$.ajax({
					type:'POST',
					url:'${request.contextPath}/menu/modify',
					dataType:'json',
					data:data,
					success:function(result){
						if(result.code==0){
							window.location.href='${request.contextPath}/menu/menuList';
						}else{
							reminder(result.message);
						}
					}
				});
			}
		});
	})
</script>
</body>
</html>